<template>
	<div>
		<Header v-if="showHeader" :title="title"></Header>
		<div class="apply">
			<p class="titleBox">基本资料：</p>
			<div class="basic_info">
				<van-field readonly v-model="apply_person" label="申请人" />

				<van-field readonly clickable required name="datetime-picker" :value="timeValue" label="单据日期" placeholder="请选择 >"
				 @click="showTime = true" />
				<van-popup v-model="showTime" position="bottom">
					<van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate" @cancel="showCalendar = false"
					 @confirm="confirmPicker" />
				</van-popup>
				<!-- <van-field readonly required :value="selectOrganize" label="所属组织" placeholder="请选择 >" @click="showtOrganizeSelect" /> -->
				<van-field v-model="selectOrganize" required readonly rows="1" autosize label="所属组织" type="textarea" placeholder="请选择 >"
				 @click="showtOrganizeSelect" />
				<van-action-sheet v-model="showOrganisation" title="选择组织">
					<div class="content">
						<ul>
							<li v-for="(item,index) in organisationItems" :key="index + '-orga'" :class="{active:index==isActiveOrganize}" @click="selectOrganizeStyle(index)">
								<span class="title">{{item.job_name}}</span>
								<span>{{item.organic_names}}</span>
							</li>
						</ul>
					</div>
				</van-action-sheet>
				<van-field :value="selectDepartment" type="textarea" required readonly rows="1" autosize label="归属部门" placeholder="请选择 >" @click="showDepartmentSelect" />
				<van-action-sheet class="department_style" v-model="showDepartment" title="归属部门">
					<div class="content">
						<div class="organization_list">
							<van-loading size="24px" vertical v-if="isDisabled">加载中...</van-loading>
							<ms-form-organization v-else :organization="organizationTree" @organizationNavs="organizationNavs" @filterOrganization="filterOrganization"></ms-form-organization>
						</div>
					</div>
				</van-action-sheet>
				<van-field readonly required :value="selectCompany" label="公司" placeholder="请选择 >" @click="showCompanySelect" />
				<van-action-sheet v-model="showCompany" title="选择公司">
					<div class="content">
						<ul>
							<li v-for="(item,index) in companyItems" :key="index + '-comp'" :class="{active:index==isActiveCompany}" @click="selectCompanyStyle(index)">
								<span class="title">{{item.company_name}}</span>
							</li>
						</ul>
					</div>
				</van-action-sheet>
				<van-field readonly :value="selectCostTag" label="费用标签名称" placeholder="请选择 >" @click="showCostTagSelect" />
				<van-action-sheet v-model="showCostTag" title="选择标签">
					<div class="content">
						<ul>
							<li v-for="(item,index) in costTagItems" :key="index + '-tag'" :class="{active:index==isActiveCostTag}" @click="selectCostTagStyle(index)">
								<span class="title">{{item.tag_name}}</span>
							</li>
						</ul>
					</div>
				</van-action-sheet>
			</div>
			<div class="apply_reason textarea_limit">
				<p class="modify_title"><span class="red">*</span>报销事由</p>
				<van-cell-group>
					<van-field type="textarea" rows="5" autosize v-model="applyReason" maxlength="200" show-word-limit placeholder="报销事由不能超过200字" />
				</van-cell-group>
			</div>
			<div class="flex_between">
				<label><span class="red">*</span>费用项目</label>
				<van-button round size="mini" color="#34d2c5" plain @click="addCostPage">添加</van-button>
			</div>
			<ul class="cost_item" v-if="cost_itemShow">
				<li v-for="(item,index) in costItems" :key="index + 'stem'">
					<p>
						<span class="bold"><label>费用项目：</label> {{item.type}}</span>
						<span><label>金额：</label> {{item.money}}</span>
						<span><label>备注：</label> {{item.remark}}</span>
						<span v-if="false"><label>id：</label> {{item.id}}</span>
					</p>
					<van-button round size="mini" type="default" plain @click="deleteCostItem(item.index)">删除</van-button>
				</li>
			</ul>
			
			<van-action-sheet v-model="showAddCostItemSelect" class="add_approver modified_approver">
				<div class="content" >
					<div class="borrow_money">
						<div class="cost_item">
							<div class="basic_info">
								<van-field
									readonly
									required
									:value="selectCostItem"
									label="费用项目"
									placeholder="请选择 >"
									@click="showCostItemSelect"
								/>
								<van-action-sheet v-model="showCostItem" title="选择费用项目">
									<div class="content">
										<ul>
											<li v-for="(item,index) in addPopCostItems" :key="index + '-costitem'" :class="{active:index==isActiveCostItem}" @click="selectCostItemStyle(index)" >
												<span class="title">{{item.fd_ptim_name}}</span>
											</li>
										</ul>
									</div>
								</van-action-sheet>
								<van-field
									required
									v-model="money"
									type="number"
									label="金额"
									placeholder="请输入"
								/>
								<div class="apply_reason textarea_limit">
								    <p class="modify_title">报销事由</p>
								    <van-cell-group>
								        <van-field 
								        type="textarea" 
								        rows="5"
								        autosize 
								        v-model="costApplyReason" 
								        maxlength="200"
								        show-word-limit
								        placeholder="报销事由不能超过200字" />
								    </van-cell-group>
								</div>
							</div>
							<van-tabbar :z-index="1000">
							    <van-tabbar-item>
										<van-button size="large" @click="submitButton">确定</van-button>
										<!-- 	<van-button v-if="approveEdit !== 'finApproveEdit'" size="large" @click="submitButton" :disabled="money.length<=0|| !money">确定</van-button>
											<van-button v-if="approveEdit == 'finApproveEdit'" size="large" @click="submitButtonEdit" :disabled="money.length<=0|| !money">确定11</van-button> -->
							    </van-tabbar-item>
							</van-tabbar>
						</div>
					</div>
				</div>
			</van-action-sheet>
			
			<div class="upload_images">
				<p><span class="red">*</span>上传单据</p>
				<!-- <van-uploader v-model="fileList" multiple :max-count="3" :after-read="afterRead"/> -->
				<van-uploader v-model="fileList" multiple />
			</div>

			<div class="flex_between">
				<label class="font_bold">冲抵借款</label>
				<span class="color_02ccbd" @click="selectMatch">选择冲抵 ></span>
			</div>
			<ul class="read_list">
				<li>
					<label>冲抵金额</label>
					<input type="text" :value="readList.offset_amount " readonly />
				</li>
				<li>
					<label>实际报销金额</label>
					<input type="text" :value="readList.actual_reimbursement" readonly />
				</li>
				<li v-if="false">
					<label>报销金额</label>
					<input type="text" :value="readList.all_amount" readonly />
				</li>
			</ul>
			
			<van-action-sheet v-model="showSelectMatch" class="add_approver bottom_btn_line">
				<div class="content" >
					<div class="borrow_money">
						<!-- <div v-if="finApplicationTitle == '我要申请'" class="selectStyle"> -->
							<van-checkbox-group v-model="result">
							  <van-cell-group>
							    <van-cell
							      v-for="(item, index) in selectList"
							      :key="index + '-match'"
										@click="setChonDiMoney (index,item)"
							    > 
										<p class="bold">借款人: {{item.fd_lnmy_loanman}}</p>
										<p>单据编号: {{item.fd_lnmy_listno}}</p>
										<p>借款金额: {{item.fd_lnmy_money}}</p>
										<p>待还金额: {{item.be_paid_money}}</p>
										<p>单据日期: {{item.fd_lnmy_listdate}}</p>
										<p>借款类型: {{item.loan_type_text}}</p>
										<van-checkbox :disabled="item.disabled" :class="item.class" slot="right-icon" :name="item" ref="checkboxes" />
							    </van-cell>
							  </van-cell-group>
							</van-checkbox-group>
							<van-tabbar :z-index="1000">
							    <van-tabbar-item>
											<van-button size="large" @click="selectMatchSubmit">确定</van-button>
							    </van-tabbar-item>
							</van-tabbar>
						<!-- </div> -->
						
						
					</div>
				</div>
			</van-action-sheet>
			
			

			<div class="flex_between">
				<label class="font_bold">收款人资料</label>
			</div>
			<div class="payee_list">
				<van-field required v-model="payeeList.person" type="text" label="收款人" placeholder="请输入" />
				<van-field required v-model="payeeList.phone" type="tel" label="收款人手机号码" placeholder="请输入" />
				<van-field required v-model="payeeList.bank_name" type="text" label="银行名称" placeholder="请输入" />
				<van-field required v-model="payeeList.bank_card" type="number" label="银行卡号" placeholder="请输入" />
			</div>

			<div class="rxlc-step">
				<h5>
					<span>审批流程</span>
					<span calss="pack_up" v-if="approve_logs.length>0 && wait_approval_list.length>0" style="color: #34ab9f !important;" @click="packUpBtn">{{packUpText}}</span>
				</h5>
				<div class="rxlc-content" v-if="showContent">
					<!-- 审批日志 start -->
					<div class="content-list" v-for="(item, index) in approve_logs" >
					  <div class="content-list-lt">
							<div v-if="item.is_approve == 0" class="lt-icon-box lt-icon-box-no-pass"></div>
							<div v-if="item.is_approve == 1" class="lt-icon-box lt-icon-box-pass"></div>
					    <div class="white-line"></div>
					  </div>
					  <div class="content-list-rt">
					    <div class="list-rt-content">
								<h3>
									<span>{{item.check_name}}</span>
								</h3>
								<div class="gray_box">
									<p class="date">
										<span>{{item.user_name}}</span>
										<span>{{item.create_time}}</span>
									</p>
									<p class="info">{{item.remark}}</p>
								</div>
							</div>
					  </div>
					</div>
					
					<div class="content-list" v-for="(item, index) in rxlc_content" :key="index + '-rxlc'">
						<div class="content-list-lt">
							<div class="lt-icon-box"></div>
							<div class="white-line"></div>
						</div>
						<div class="content-list-rt">
							<div class="list-rt-content">
								<h3>
									<span>{{item.node}}</span>
									<van-icon v-if="item.select_type !== 1" name="add-o" @click="addApprover(item.user,item.node,item.select_type,index)" />
								</h3>
								<p class="name_box">{{item.selectPersonString}}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<van-action-sheet v-model="showAddApprover" class="add_approver bottom_btn_half">
				<div class="content" >
					<van-radio-group v-if="addApproverType == 2" v-model="addApproverRadio">
						<van-radio :name="index" v-for="(item, index) in addApproverUser" :key="index + '-duser'">
							<p>{{item}}</p>
							<p class="undertint">{{addApproverNode}}</p>
						</van-radio>
					</van-radio-group>
					<van-checkbox-group v-if="addApproverType == 3" v-model="addApproverMultiple">
						<van-checkbox :name="index" v-for="(item, index) in addApproverUserMutiple" :key="index + '-muser'">
							<p>{{item}}</p>
							<p class="undertint">{{addApproverNode}}</p>
						</van-checkbox>
					</van-checkbox-group>
				</div>
				<div class="fix_bottom" v-if="addApproverType == 2">
					<span class="select_style">单选：</span>
					<span class="select_style">1人</span>
					<van-button size="large" native-type="submit" @click="saveApproverRadio(addApproverIndex)">确定</van-button>
				</div>
				<div class="fix_bottom" v-if="addApproverType == 3">
					<span class="select_style">多选：</span>
					<span class="select_style">{{addApproverMultiple.length}}人</span>
					<van-button size="large" native-type="submit" @click="saveApproverCheckbox(addApproverIndex)">确定</van-button>
				</div>
			</van-action-sheet>
			
			<div class="fixed_two_btn">
				<van-tabbar :z-index="1000">
					<van-tabbar-item>
						<van-button size="large" @click="submitApply(0)" :disabled="applyReason.length<=0|| !applyReason">保存</van-button>
						<van-button size="large" @click="submitApply(1)" :disabled="applyReason.length<=0|| !applyReason">保存并提交审批</van-button>
					</van-tabbar-item>
				</van-tabbar>
			</div>
		</div>
		<Loading v-show="showLoading"></Loading>
	</div>
</template>
<script>
	import ReferData from "@/components/business/ReferData.vue";
	import ApprovalStep from "@/components/business/ApprovalStep.vue";
	import {
		addApplyGet,
		addApplyPost,
		uploadFile,
		userOrganization,
		expenseAdd,
		userJobs,
		companies,
		feeTagList,
		approvalProcess,
		loanList,baoxiaoList,expenseDetail,expenseEdit,feeSubjectList,uploadImgs
	} from "@/request/api.js";
	import Loading from "@/components/Loading.vue";
	import Header from "@/components/Header.vue";
	import axios from 'axios';
	import MsFormOrganization from '@/components/FormOrganization';
	import {
		deepCopy
	} from "@/plugins/deepCopy.js";
	import eventBus from '@/utils/eventBus.js';
	import deboune from '@/utils/deboune.js';
	export default {
		name: 'finApplication',
		data() {
			return {
				showHeader: this.$store.state.showHeader,
				showLoading: true,
				uploadImgsError:false,
				title: '我要申请',
				id:0,
				apply_id:0,
				apply_person:'',
				//日历控件
				timeValue: '',
				showTime: false,
				showCalendar: false,
				currentDate: new Date(),
				minDate: new Date(2020, 0, 1),
				maxDate: new Date(2025, 10, 1),
				currentDate: new Date(),
				//所属组织
				showOrganisation: false,
				selectOrganize: '',
				//是否修改审批流
				isEditApproval: false,
				isActiveOrganize: 0,
				organisationItems: [],
				organic_job_id: '',
				organicId:'',
				job_id:'',
				//选中审批人
				showAddApprover: false,
				addApproverRadio: '',
				addApproverUser:[],
				addApproverUserMutiple:[],
				addApproverNode:'',
				addApproverType:'',
				addApproverIndex:'',
				addApproverRadioLen:'',
				addApproverMultiple: [],
				selectPersonIds:[],
				approvalflow:[],
				
				//冲抵借款
				readList: {
					offset_amount: 0,
					actual_reimbursement: 0,
					all_amount: 0,
				},
				showSelectMatch:false,
				list: [],
				selectList:[],
				result: [],// 冲抵选中列表
				paidMoney:[],
				finApplicationTitle:'',
				// checkboxShow:false
				checked:false,
				disabled:false,
				checkArr:[],
				flag:false,
				//归属部门
				selectDepartment: '',
				selectDepartment_id: '',
				showDepartment: false,
				//组织
				organization: '',
				isDisabled: true,
				organizationTree: [],
				organizationid: '',
				organizationids: '',
				//公司
				selectCompany: '',
				showCompany: false,
				isActiveCompany: 0,
				companyItems: [],
				fd_company: '',
				//标签
				selectCostTag: '',
				showCostTag: false,
				isActiveCostTag: 0,
				costTagItems: [],
				fee_tag_id: '',
				//费用项目
				cost_itemShow: true,
				costItems: [],
				//审批流
				addBtnShow: true,
				approve_logs: [],
				wait_approval_list: [],
				showContent:true, //审批流程默认收起
				packUpText:'收起',
				rxlc_content:[],
				select_rxlc:[],
				rxlc_content_user:{},
				//收款人资料
				payeeList: {
					person: '',
					phone: '',
					bank_name: '',
					bank_card: ''
				},
				//报销事由
				applyReason: '',

				stepList: [],
				activeStep: 0,
				staffer_id: '',
				fileList: [],
				imageList: [],
				uploadFilequery: null,
				handImageList: [],
				
				userInfo:{
				    fd_sta_name:'',
				    fd_jobs_name:'',
				    fd_sta_mobile:'',
				    fd_sta_photo:'',
				    apply_reason:'',
				    start_time:'',
				    end_time:'',
				    history_apply_time:'',
				    now_check_time_status:'',
				    total_time:'',
				    created_at:'',
				    apply_img:[],
						fd_payoutlist_picurl:[]
				},
				//添加费用项目弹窗
				showAddCostItemSelect: false,
				//标签
				selectCostItem:'',
				selectCostItemId:'',
				showCostItem:false,
				isActiveCostItem:0,
				addPopCostItems:[],
				money:'',
				costApplyReason:'',
				allCostItems:[],
				allCostItemsEdit:[],
				approveEdit:'',
				filesImgs:[],
				backgroundImgs:[]
			}
		},
		components: {
			ReferData,
			ApprovalStep,
			Loading,
			Header,
			MsFormOrganization
		},
		created() {
			sessionStorage.removeItem("allCostItems");
			window.sessionStorage.flag = false;
			//this.operator_name = localStorage.getItem("staffer_name");
		},
		// computed:{
		// 	operator_name(){
		// 		return sessionStorage.getItem("staffer_name");
		// 	}
		// },
		watch:{
		     fileList:{
		       handler(newVal,oldVal){
							if(newVal.length){
								this.afterRead(newVal,oldVal);
							}else{
								this.imageList=[];
							}
		       },
		       deep:true
		     }
		 },		
		mounted() {
			let status = this.$route.query.the_approve_status;
			
			let that = this;
			that.staffer_id = localStorage.getItem('staffer_id');
			that.id = that.$route.query.id;
			
			expenseDetail({token:this.$store.state.token,id:that.id}).then(res=>{
				// console.log(res,'ressddf');
					that.showLoading = false;
					if(res.code == 1){
						this.$toast({
								duration: 1000,
								message:res.msg
						});
						return false;
					}
			    let data = res.data;
					if(data == null && typeof data == 'undefined'){// 从消息列表进来
						this.$dialog.alert({
							title: '提示',
							message: '单据不存在或已删除'
						}).then(() => {
							// 跳转 【费用--我发起的】列表页
							this.$router.push('/finSponsored');
						});
						return false;
					}
					if(status != undefined && status != data.fd_payoutlist_state){// 从消息列表进来
						this.$dialog.alert({
							title: '提示',
							message: '单据状态已修改'
						}).then(() => {
							// 跳转 【费用--我发起的】列表页
							this.$router.push('/finSponsored');
						});
						return false;
					}
					that.readList.all_amount = data.fd_payoutlist_allmoney
					that.readList.offset_amount = data.fd_offset_money
					that.readList.actual_reimbursement = data.fd_actualities_money
					
					that.timeValue = data.fd_payoutlist_date
					this.apply_id = data.fd_payoutlist_dealwithman_id
					this.apply_person = data.fd_payoutlist_dealwithman
					
					//所属组织
					that.selectOrganize = data.organize_name
					that.organic_job_id= data.organic_sonid +'_' + data.fd_payoutlist_jobs_id
					//归属部门
					that.selectDepartment = data.fd_department_name;
					// let fd_department_name = data.fd_department_name;
					// let fd_department_index = fd_department_name.lastIndexOf("\-");
					// fd_department_name = fd_department_name.substring(fd_department_index + 1, fd_department_name.length);
					// that.selectDepartment = fd_department_name;
					that.selectDepartment_id = data.fd_department_id
					
					// 公司
					that.selectCompany = data.company_name
					that.fd_company = data.fd_company
					// 标签
					that.selectCostTag = data.fee_tag_name
					that.fee_tag_id = data.fee_tag_id
					// 报销事由
					that.applyReason = data.fd_payoutlist_memo
					// 费用项目
					data.item_list.forEach((item,index) => {
						that.costItems.push({
							 id:item.fd_ptltdl_ptteid,
							 index:data.item_list.length,
							 type:item.fd_ptim_name,
							 money:parseFloat(item.fd_ptltdl_cost).toFixed(2),
							 remark:item.fd_ptltdl_memo,
						});
					})
					
					let picurlarr = [];
					if( data.fd_payoutlist_picurl != null ) data.fd_payoutlist_picurl.forEach(item=>{
						that.fileList.push({url:item,content:item,status:''})
					}) ;
				
					that.payoutlistId = data.fd_payoutlist_id;
					
					// 收款人资料
					that.payeeList.person = data.fd_payee
					that.payeeList.phone = data.fd_payee_phone
					that.payeeList.bank_name = data.fd_bank_car
					that.payeeList.bank_card = data.fd_bank_car_number
					
					that.approve_logs = data.approve_logs;
					that.wait_approval_list = data.wait_approval_list;
					
					that.rxlc_content = data.fd_approval_list.data;
					this.rxlc_content.forEach((item,i)=>{
						item.selectPersonIds = null;
						item.selectPersonString = '';
						item.selectPersonString = Object.values(item.user).join('，');
						item.select_type = 1;
					});
					
					that.userInfo = data;
			}).catch(error=>{
			    console.log(error)
			    that.showLoading = false;
			});
			that.readList.offset_amount = parseFloat(that.readList.offset_amount).toFixed(2);
			that.readList.actual_reimbursement = parseFloat(that.readList.actual_reimbursement).toFixed(2);
			that.readList.all_amount = parseFloat(that.readList.all_amount).toFixed(2);
			
			/* 借款列表 */
			loanList({token:that.$store.state.token,applicant_id:that.$store.state.staffer_id,type:2,per_page:0,get_type:3,baoxiao_id:that.id}).then(res=>{
				// 请求的列表数据 
				that.selectList = res.data.data;
				that.selectList.forEach(item=>{
					item.checked = item.is_checked == '1' ? true : false;
					if(item.checked == true ) that.result.push(item);
					
					item.disabled = false;
					item.class = "";
					if(item.is_can_checked == 0){/* 不可选 */
						item.disabled = true;
						item.class = "t-display";
					}
				})
			}).catch((e)=>{
				console.log(e);
				that.showLoading = false;
			})
			
		},
		//定义私用局部过滤器。只能在当前 vue 对象中使用
		filters: {
				ObjString(obj) {
					obj = Object.values(obj).join("，")
						return obj;
				}
		},
		methods: {
			//获取图片上传阿里云凭证
			getUploadInfo(callBack){
				// if(this.uploadFilequery != null ) return this.uploadFilequery;
				uploadImgs({
					token: this.$store.state.token,
					project: 'finance',
					project_key: 'office_expense_reimburse'
				}).then(res => {
					if(res.code == 1){
						this.$toast({
								duration: 1000,
								message:res.msg
						});
						return false;
					}
					this.uploadFilequery = res.data;
					// this.uploadFilequery.host = 'https' + this.uploadFilequery.host.slice(4);
					if (this.isAndroid_ios()) {
						let up = document.getElementsByClassName('van-uploader__input');
						console.log(up)
						up[0].setAttribute('capture', 'camera');
					}
					if( typeof callBack == 'function') callBack(this);
				}).catch(error => {
					console.log(error)
				})
			},
			// 确认选择的时间
			confirmPicker(val) {
				let year = val.getFullYear()
				let month = val.getMonth() + 1
				let day = val.getDate()
				// let hour = val.getHours()
				// let minute = val.getMinutes()
				if (month >= 1 && month <= 9) {
					month = `0${month}`
				}
				if (day >= 1 && day <= 9) {
					day = `0${day}`
				}
				// if (hour >= 0 && hour <= 9) { hour = `0${hour}` }
				// if (minute >= 0 && minute <= 9) { minute = `0${minute}` }
				// this.className = 'timeClass'
				// this.timeValue = `${year}-${month}-${day} ${hour}:${minute}`
				this.timeValue = `${year}-${month}-${day}`
				this.showTime = false
			},
			//点击请选择所属组织
			showtOrganizeSelect() {
				let token = this.$store.state.token;
				// let token = 'bca7da10b8e98abf95a7abe2bdc29a883';
				this.showOrganisation = true;
				userJobs({
					token: token,
					staffer_id: this.$store.state.staffer_id
				}).then(res => {
					// 请求的列表数据
					let organizeArr = res.data.jobs;
					this.organisationItems = organizeArr;
				}).catch((e) => {
					console.log(error)
					this.showLoading = false;
				})
			},
			//归属部门
			showDepartmentSelect() {
				this.showDepartment = true;
				userOrganization({
					token: this.$store.state.token,
					organic_type:'all'
				}).then(res => {
					let data = res.data.tree;
					this.organizationTree = deepCopy(data);
					this.organizationTree = JSON.parse(JSON.stringify(this.organizationTree).replace(/name/g, 'label'));
					this.organizationTree = JSON.parse(JSON.stringify(this.organizationTree).replace(/id/g, 'value'));
					// console.log(this.organizationTree)
					this.isDisabled = false;
				}).catch(error => {
					console.log(error)
				})
			},
			//选择组织
			selectOrganizeStyle(index) {
				this.isActiveOrganize = index;
				this.selectOrganize = this.organisationItems[index].organic_names;
				let organic_id = this.organisationItems[index].organic_id;
				let ids = this.organisationItems[index].organic_ids;
				let jobid = this.organisationItems[index].job_id;
				let ids_jobid = ids + '_' + jobid;
				this.organic_job_id = ids_jobid;
				this.organicId = organic_id;
				this.job_id = jobid;
				this.showOrganisation = false;
				this.isEditApproval = true;
				approvalProcess({
					token: this.$store.state.token,
					tip:'fybxsp',
					pid:this.organicId,
					job:this.job_id,
					staff:this.staffer_id,
					type:1
				}).then(res => {
					if(res.code == 1 ){
						this.$toast({
						  duration: 1000,
						  message: res.msg
						});
						return false;
					}
					this.rxlc_content = res.data.data;
					this.rxlc_content.forEach((item,index)=>{
						item.selectPersonIds = [];
						item.selectPersonString = '';
						item.selectApproval = null;//选中审批人资源 数组
						if(item.select_type == 1){/* 不可选 */
							item.selectPersonString = Object.values(item.user).join('，');
							item.selectPersonIds = Object.keys(item.user);
						}
					});
					
					this.select_rxlc = res.data.data.filter(arrItem=>{
						return arrItem.select_type !== 1
					})
				}).catch(error => {
					console.log(error)
					this.showLoading = false;
				})
			},
			//归属部门 选择回填
			organizationNavs(data){
				if(data){
					let labelshow ='';
					data.forEach((item,index)=>{
						if(index == data.length-1){
							this.selectDepartment_id = item.value
						}
						return labelshow += item.label + '-'
					})
					this.organizationNavLabel = labelshow;
					this.organizationNavLabel = this.organizationNavLabel.substr(0, this.organizationNavLabel.length - 1);
					this.selectDepartment = this.organizationNavLabel;
				}
			},
			filterOrganization(data) {
				this.showDepartment = false;
				if(data){
					this.organizationNavLastLabel = data.label;
					// this.selectDepartment_id = data.value;
				}
			},
			//点击请选择公司
			showCompanySelect() {
				this.showCompany = true;
				companies({
					token: this.$store.state.token
				}).then(res => {
					// 请求的列表数据 
					let companyArr = res.data.companies;
					this.companyItems = companyArr;
				}).catch((e) => {
					console.log(e);
					this.showLoading = false;
				})
			},
			//选择公司
			selectCompanyStyle(index) {
				this.isActiveCompany = index;
				this.selectCompany = this.companyItems[index].company_name;
				this.fd_company = this.companyItems[index].id;
				this.showCompany = false;
			},
			//点击请选择标签
			showCostTagSelect() {
				this.showCostTag = true;
				feeTagList({
					token: this.$store.state.token,
					page: 1,
					per_page: 0
				}).then(res => {
					// 请求的列表数据 
					let costTagArr = res.data.data;
					this.costTagItems = costTagArr;
				}).catch((e) => {
					console.log(e);
					this.showLoading = false;
				})
			},
			//选择标签
			selectCostTagStyle(index) {
				this.isActiveCostTag = index;
				this.selectCostTag = this.costTagItems[index].tag_name;
				this.fee_tag_id = this.costTagItems[index].id;
				this.showCostTag = false;
			},
			//费用项目添加
			addCostPage(e) {
				this.showAddCostItemSelect = true;
				// 每次点击清空弹窗数据
				this.selectCostItem='';
				this.money='';
				this.costApplyReason='';
			},
			//选择费用项目
			selectCostItemStyle(index) {
				 this.isActiveCostItem=index;
				 this.selectCostItem = this.addPopCostItems[index].fd_ptim_name;
				 this.selectCostItemId = this.addPopCostItems[index].fd_ptim_id;
				 this.showCostItem = false;
	　　},
			//添加费用项目确定事件
			submitButton(){
				if(this.selectCostItem !=='' && this.money !==''){
					this.resetChonDiMoney();
					this.costItems.push({
										 id:this.selectCostItemId,
										 index:this.costItems.length+1,
										 type:this.selectCostItem,
										 money:this.money,
										 remark:this.costApplyReason
					})
					this.showAddCostItemSelect = false;
					
					let itemArr = this.costItems;
					let res = itemArr.reduce(function(a, b) {
							return Number(a) + Number(b.money);
						}, 0)
					this.readList.all_amount = res.toFixed(2);
					this.readList.actual_reimbursement = (parseFloat(this.readList.all_amount) - parseFloat(this.readList.offset_amount)).toFixed(2);
				} else {
					this.showAddCostItemSelect = false;
				}
				
			},
			//费用项目删除按钮
			deleteCostItem(index) {
				// console.log(index,'index');
				//按当前索引删除数组
				this.costItems.splice(this.costItems.findIndex(item => (item.index) === index), 1)
				//设置新缓存
				sessionStorage.allCostItemsEdit = JSON.stringify(this.costItems);
				let itemNewArr = this.costItems;
				let newres = itemNewArr.reduce(function(a, b) {
					return Number(a) + Number(b.money);
				}, 0)
				this.readList.actual_reimbursement = newres.toFixed(2);
				this.readList.all_amount = newres.toFixed(2);
			},
			showCostItemSelect(){
			 this.showCostItem = true;
			 feeSubjectList({token:this.$store.state.token,page:1,per_page:0}).then(res=>{
				// 请求的列表数据 
				let costItemArr = res.data.data;
				this.addPopCostItems  = costItemArr;
				// console.log(res,'res');
			 }).catch((e)=>{
				console.log(e);
				this.showLoading = false;
			 })
		 },
			//选择冲抵
			selectMatch() {
				this.showSelectMatch = true;
			},
			/* 设置冲抵金额 */
			setChonDiMoney(index,item) {
        var total = 0,result = true,counter = 0,isBeyond = false;
				this.readList.all_amount = parseFloat(this.readList.all_amount);
				
				if( item.is_can_checked == 0 ) return false; 
				
				this.$refs.checkboxes[index].checked = !this.$refs.checkboxes[index].checked;
				item.checked = !item.checked;
				
				if( this.readList.all_amount <= 0 ) {
					this.$toast({
							duration: 1000,
							message:'报销金额不能为0，请添加费用项目'
					});
					this.$refs.checkboxes[index].toggle(false);//限制勾选
					return false;
				}
				
				
				//选中 计算总金额
				this.result.forEach((tempItem,start) => {
					 tempItem.checked = true;
					 //忽略刚点击的
						if( item.index !=  tempItem.index ){
							total = parseFloat(tempItem.be_paid_money) + total;
							if( total > this.readList.all_amount) counter++;
						}
				});
        if( item.checked == true ){
            //计算 刚点击的冲抵金额
            total = parseFloat(item.be_paid_money) + total;
            if( total > this.readList.all_amount) counter++;
        }
        isBeyond = counter > 1 ? true : false;
				
				
				let flag =window.sessionStorage.flag;
				if(flag == "true" && isBeyond){
						this.$refs.checkboxes[index].toggle(false);//限制勾选
						this.$toast({
								duration: 1000,
								message:'冲抵金额已经大于费用报销金额，请重新选择'
						});
						return false;
			
				}
				if(!this.result.length){
					window.sessionStorage.flag = false;
				}else{
					window.sessionStorage.flag = true;
				}
				
        if( total > this.readList.all_amount)  total = this.readList.all_amount;
        this.readList.offset_amount = total.toFixed(2);
        this.readList.actual_reimbursement =  (this.readList.all_amount - this.readList.offset_amount).toFixed(2);
        return true;
			},
			// 重置冲抵金额
			resetChonDiMoney(){
				this.result = [];
				this.readList.offset_amount = 0;
			},
			selectMatchSubmit(){
				this.showSelectMatch = false;
			},
			//收起
			packUpBtn(){
				this.showContent = !this.showContent;
				if(this.showContent==true){  
						this.packUpText = "收起"  
				}else if(this.showContent==false){  
						this.packUpText = "展开"  
				} 
			},
			//添加审批人事件 
			addApprover(item,node,type,index){
				this.addApproverUser = Object.values(item);
				this.addApproverUserIds = Object.keys(item);
				this.addApproverUserMutipleIds = Object.keys(item);
				this.addApproverUserMutiple = Object.values(item);
				this.addApproverNode = node;
				this.addApproverType = type;
				this.addApproverIndex = index;
				this.showAddApprover = true;
			 
				if( this.rxlc_content[index].selectApproval !== null ){
					if(this.rxlc_content[index].select_type == 2) this.addApproverRadio = this.rxlc_content[index].selectApproval;
					if(this.rxlc_content[index].select_type == 3) this.addApproverMultiple = this.rxlc_content[index].selectApproval;
				} else {
				  this.addApproverRadio = '';
				  this.addApproverMultiple = [];
				}
			},
			//审批流程--添加审批人--单选--确定按钮
			saveApproverRadio(index) {
				let that =this;
				that.showAddApprover = false;
				that.rxlc_content.forEach((item,index)=>{
					if(that.addApproverIndex == index){
						var key = that.addApproverRadio;
						item.selectPersonString = that.addApproverUser[key];
						item.selectPersonIds.push(that.addApproverUserIds[key]);
						//that.addApproverRadio = item.selectPersonString
						item.selectApproval = that.addApproverRadio;
					}
				});
			},
			//审批流程--添加审批人--多选--确定按钮
			saveApproverCheckbox() {
				let that =this;
				that.showAddApprover = false;
				that.rxlc_content.forEach((item,index)=>{
					if(that.addApproverIndex == index){
						var tempUser = [],tempUserIds = [];
						that.addApproverMultiple.forEach((val,key)=>{
							tempUser.push(that.addApproverUser[val])
							tempUserIds.push(that.addApproverUserIds[val])
						})
						
						item.selectPersonMultiple = that.tempUser;						
						item.selectPersonString = tempUser.join("，")
						item.selectPersonIds = tempUserIds;
						item.selectApproval = that.addApproverMultiple;
					}
				});
			},
			// 判断是安卓手机还是ios手机
			isAndroid_ios() {
				var u = navigator.userAgent,
					app = navigator.appVersion;
				// console.log(u)
				// console.log(app)
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
				var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				return isAndroid == true ? true : false;
			},
			//随机字符串
			random_string(len) {
				len = len || 32;
				var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
				var maxPos = chars.length;
				var pwd = "";
				var i = 0;
				for (; i < len; i++) {
					pwd += chars.charAt(Math.floor(Math.random() * maxPos));
				}
				return pwd;
			},
			unique(arr){
				return Array.from(new Set(arr))
			},
			uploadBefore(newFiles,oldFiles){
				let that = this;
				for (let i = oldFiles.length; i < newFiles.length; i++) {
					that.fileList[i].status = 'uploading';
					that.fileList[i].message = '上传中...';
				}
			},
			// 单据上传
			afterRead(newFiles,oldFiles){
				let that = this;
				that.uploadBefore(newFiles,oldFiles);
				that.getUploadInfo(function(that){
					that.showLoading = true;
					let files = newFiles;
					//that.imageList=[];
					for (let i = oldFiles.length; i < files.length; i++) {
						let data = new FormData();
						let file = files[i];
						let ext = file.file.name.substr(file.file.name.lastIndexOf(".")); //获得后缀
						if (ext == ".png" || ext == ".jpeg" || ext == ".bmp" || ext == ".jpg"){
							let uploadFileName = that.uploadFilequery.dir + that.random_string()+ext;
							data.append("OSSAccessKeyId", that.uploadFilequery.accessid);
							data.append("policy", that.uploadFilequery.policy);
							data.append("Signature", that.uploadFilequery.signature);
							data.append("success_action_status", "200");
							data.append("key", uploadFileName);
							data.append("file", file.file);
							// console.log(uploadFileName,'uploadFileName');
							axios
							.post(that.uploadFilequery.host, data, {
								headers: { "Content-Type": "application/x-www-form-urlencoded" }
							})
							.then(res => {
								console.log(res,'提交阿里云');
								// that.imageList.push(that.uploadFilequery.host + '/' + uploadFileName);
								that.fileList[i].content = that.uploadFilequery.host + '/' + uploadFileName;
								
								that.showLoading = false;
								that.uploadImgsError =false;
								
								that.fileList[i].status = '';
								that.fileList[i].message = '上传成功';
							})
							.catch(error => {
								that.fileList[i].status = 'failed';
								that.fileList[i].message = '上传失败';
								
								that.getUploadInfo();
								console.log(error);
								that.showLoading = false;
								that.uploadImgsError =true;
								that.$toast({
									duration: 2000,
									message: "图片上传失败，请重新上传！"
								});
							});
						}else {
							that.fileList[i].status = 'failed';
							that.fileList[i].message = '上传失败';
							that.$toast({
								duration: 2000,
								message: "图片格式不正确！"
							});
						}  
					}
					
					if(that.showLoading) that.showLoading = false;
				});
			},
			// 保存修改
			submitApply:deboune._debounce_merge(function(submit_status) {
				let fd_ptltdl_ptteid = [];
				let fd_ptltdl_cost = [];
				let fd_ptltdl_memo = [];
				this.costItems.forEach(item => {
					fd_ptltdl_ptteid.push(item.id);
					fd_ptltdl_cost.push(item.money);
					fd_ptltdl_memo.push(item.remark);
				})
				/* 审批流数据 */
				this.approvalflow = [];//重置
				this.rxlc_content.forEach((item,index) => {
					 this.approvalflow.push(item.selectPersonIds);
				});
				
				let loan_id = [];
				this.result.forEach((item,index)=>{
					 loan_id.push(item.fd_lnmy_id);
				});
				this.imageList = [];
				if( this.fileList.length > 0){
					for(let i = 0;i < this.fileList.length;i++){
						if(this.fileList[i].status != 'failed') this.imageList.push(this.fileList[i].content);
					}
				}
				
				if(this.imageList.length <= 0){
					this.$toast({
					  duration: 3000,
					  message: "请上传单据"
					});
					return false
				}
				this.showLoading = true;
				let postData = {
					id:this.id,
					token: this.$store.state.token,
					submit_status: submit_status,
					fd_payoutlist_date: this.timeValue,
					organic_job_id: this.organic_job_id,
					department_id: this.selectDepartment_id,
					fee_tag_id: this.fee_tag_id,
					fd_company: this.fd_company,
					fd_payee: this.payeeList.person,
					fd_payee_phone: this.payeeList.phone,
					fd_bank_car: this.payeeList.bank_name,
					fd_bank_car_number: this.payeeList.bank_card,
					fd_ptltdl_ptteid: fd_ptltdl_ptteid,
					fd_ptltdl_cost: fd_ptltdl_cost,
					fd_ptltdl_memo: fd_ptltdl_memo,
					// approvalflow: this.approvalflow,
					total_money:this.readList.all_amount,
					charge_against_money:this.readList.offset_amount,
					actual_money:this.readList.actual_reimbursement,
					loan_id:loan_id,
					imgs:this.imageList,
					fd_payoutlist_memo:this.applyReason,
				};
				if( this.isEditApproval == true ) postData['approvalflow'] = this.approvalflow;
				expenseEdit(postData).then(res => {
					this.showLoading = false;
					 if(res.code == 1 || this.uploadImgsError){
						 this.backgroundImgs=[];
						 // 提示错误
						 this.$toast({
						 		duration: 2000,
						 		message:res.msg,
						  });
						 return false;
					 }else{
						 this.$toast({
						 		duration: 1000,
						 		message:res.msg,
						  });
						 //跳转 列表页
						 this.$router.push("/finSponsored")
					 }
				}).catch(error => {
					console.log(error);
					this.showLoading = false;
				});
			},1000),
		}
	}
</script>
<style lang="less" scoped>
	.apply {
		padding-bottom: 55px;
		.basic_info {
			line-height: 36px;
			background-color: #fff;
			border-bottom: 1px solid #f7f7f7;
			font-size: 14px;
			color: #999;
			box-sizing: border-box;

			/deep/ .van-field__label {
				color: #151617;
			}

			/deep/ .van-field__control {
				text-align: right;
			}

			/deep/ .van-picker__confirm {
				color: #19cfc1;
			}

			/deep/ .van-picker__cancel {
				color: #232426;
			}

			/deep/ .van-popup {
				border-top-left-radius: 15px;
				border-top-right-radius: 15px;
			}

			/deep/ .van-cell--required::before {
				left: 15px !important;
			}

			/deep/ .van-cell--required {
				padding-left: 23px;
			}

			.content {
				height: auto;
				max-height: 260px;
				overflow-y: auto;

				ul {
					li {
						padding: 10px 15px;
						font-size: 14px;
						border-bottom: 1px solid #f7f7f7;

						span {
							width: 100%;
							display: block;
							line-height: 24px;
							// margin-bottom: 10px;
							color: #747577;
						}

						span:last-child {
							font-size: 12px;
						}

						.title {
							color: #334545;
						}
					}

					li.active {
						background-color: #33cccc;
					}

					li.unactive {
						background-color: #fff;
					}
				}
			}
		}

		.titleBox {
			width: 100%;
			line-height: 36px;
			font-weight: bold;
			padding: 10px 15px;
			font-size: 14px;
			color: #151617;
			background-color: #fff;
			box-sizing: border-box;
		}

		.read_list {
			width: 100%;
			height: auto;
			background: #fff;

			li {
				padding: 10px 15px;
				line-height: 36px;
				border-bottom: 1px solid #f7f7f7;
				font-size: 14px;
				color: #151617;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				label {
					flex: 1;
				}

				input {
					flex: 2;
					text-align: right;
					color: #151617;
				}
			}
		}

		.apply_reason,
		.upload_images {
			width: 100%;
			height: auto;
			background: #fff;
			margin-top: 10px;
			padding: 10px 15px;
			box-sizing: border-box;
			color: #151617;
			font-size: 14px;

			p {
				line-height: 36px;
				font-weight: bold;
			}

			.van-hairline--top-bottom::after,
			.van-hairline-unset--top-bottom::after {
				border: none;
			}

			.van-cell {
				padding: 0;
				font-size: 14px;
				color: #999;
			}
		}

		.upload_images {
			span {
				color: #999;
				font-weight: normal;
			}

			/deep/ .van-uploader__upload {
				background: #f7f7f7;

				.van-uploader__upload-icon {
					font-size: 30px;
				}
			}

			/deep/ .van-uploader__preview-delete {
				// display: none;
				right: -14px !important;
			}
		}

		/deep/ .van-tabbar-item__text {
			display: block;
			width: 100%;
		}

		.modify_title {
			font-weight: 500 !important;
			color: #151617 !important;
		}

		.flex_between {
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: auto;
			background: #fff;
			margin-top: 10px;
			padding: 10px 15px;
			box-sizing: border-box;
			color: #151617;
			font-size: 14px;
		}

		.cost_item {
			li {
				display: flex;
				justify-content: space-between;
				padding: 10px 15px;
				border-top: 1px solid #f7f7f7;
				background-color: #fff;
				font-size: 14px;
				color: #999;
				box-sizing: border-box;

				p {
					width: 82%;
					line-height: 24px;

					span {
						width: 100%;
						display: block;

						label {
							text-align: right;
							width: 70px;
							display: inline-block;
						}
					}

					.bold {
						color: #151617;
					}
				}

				/deep/ .delete_color {
					border-color: red;
				}
			}
		}

		/deep/ .van-uploader__preview {
			width: 70px;
			margin-right: 15px;
		}
		
		/deep/ .van-uploader__mask {
			width: 80px !important;
		}

		.font_bold {
			font-weight: 600;
		}

		.m-t-0 {
			margin-top: 0;
		}

		.red {
			color: red !important;
		}

		.color_02ccbd {
			color: #02ccbd;
		}

		.payee_list {
			/deep/ .van-field__label {
				width: 130px;
				display: block;
			}

			/deep/ .van-field__control {
				text-align: right;
			}
		}

		.department_style {
			height: 300px;

			/deep/ .van-action-sheet__content {
				position: absolute;
				width: 100%;
				left: 0;
				top: 43px;
				height: 300px;
			}

			.content,
			.organization_list {
				height: 100%;
			}

			.content {
				overflow: hidden;
			}

			/deep/ .ms-organization-body {
				height: 82% !important;
			}

			/deep/ .ms-organization-footer {
				z-index: 999 !important;
			}
		}

		.textarea_limit {
			margin-top: 0;

			/deep/ .van-field__control {
				height: 120px !important;
				overflow: auto;
				text-align: left;
			}
		}

		// .approval_process {
		// 	.van-step--vertical {
		// 		padding: 6px 0;
		// 		h3 {
		// 			color: #333333 !important;
		// 		}
		// 		.gray_box {
		// 			background-color: #f2f2f2;
		// 			padding: 10px;
		// 			.date {
		// 				display: flex;
		// 				justify-content: space-between;
		// 				margin-bottom: 5px;
		// 				color: #333333 !important;
		// 			}
		// 			.info {
		// 				color: #676767 !important;
		// 			}
		// 		}
		// 	}
		// 	/deep/ .van-steps--vertical{
		// 		padding-right: 12px;
		// 		.van-step__title--active {
		// 			color: #333;
		// 		}
		// 		.van-step__circle,.van-step__icon--active {
		// 			width: 12px;
		// 			height: 12px;
		// 			border-radius: 0;
		// 			color: transparent; 
		// 			display: block;
		// 			background:url(../../../assets/images/icon_splc_04.png);
		// 			background-size:12px 12px;
		// 			background-repeat:no-repeat;
		// 		}
		// 		.van-step__icon--active {
		// 			background-image:url(../../../assets/images/icon_splc_01.png);
		// 		}
		// 	}
		// }

	.rxlc-step {
	    width: 100%;
			background-color: #fff;
			margin-top: 10px;
			h5 {
				background: #fff;
				margin-top: 10px;
				padding: 12px 15px 6px;
				box-sizing: border-box;
				color: #151617;
				font-size: 14px;
				display: flex;
				justify-content: space-between;
			}
	    .rxlc-content {
	      width: 100%;
	      position: relative;
				bottom: 10px;
	      .content-list {
	        width: 100%;
	        display: table;
	        .content-list-lt {
	          display: table-cell;
						padding-left: 15px;
	          position: relative;
						top: 2px;
	          color: #ffffff;
	          font-size: 16px;
						.lt-icon-box {
							width: 13px;
							height: 13px;
							background:url(../../../assets/images/icon_splc_04.png);
							background-size:13px 13px;
							background-repeat:no-repeat;
						  margin-right: 7px;
						  z-index: 999;
						}
						.lt-icon-box-pass {
							background-image:url(../../../assets/images/icon_splc_01.png);
						}
						.lt-icon-box-no-pass {
							background-image:url(../../../assets/images/icon_splc_03.png);
						}
	          .white-line {
	            width: 1px;
	            height: 100%;
	            position: absolute;
	            top: 24px;
							left: 21px;
	            background: #e4e4e4;
	          }
	        }
	        .content-list-rt {
	          width: 93%;
	          display: table-cell;
						padding-right: 15px;
	          .list-rt-content {
							padding: 12px 0 0;
	            color: #333333;
	            font-size: 13px;
	            line-height: 18px;
							h3 {
								color: #333333 !important;
								font-weight: 500;
								font-size: 14px;
								margin-bottom: 2px;
								display: flex;
								justify-content: space-between;
								/deep/ .van-icon-add-o {
									color: #21a399;
									font-size: 18px;
									// font-weight: 600;
								}
								// .addButton {
								// 	width: 20px;
								// 	height: 20px;
								// 	display: inline-block;
								// 	background-color: pink;
								// }
							}
							.name_box {
								color:#343434;
								padding-left: 10px;
								margin-top: 5px;
							}
							.gray_box {
								background-color: #f2f2f2;
								padding: 8px;
								.date {
									display: flex;
									justify-content: space-between;
									margin-bottom: 5px;
									color: #333333 !important;
								}
								.info {
									color: #676767 !important;
									word-break: break-all;
								}
							}
							.write_box {
								background-color: #fff;
								padding:2px 8px;
							}
	          }
	        }
	        &:last-child {
	          .content-list-lt {
	            .white-line {
	              width: 0px;
	            }
	          }
	          .content-list-rt {
	            .cat-line {
	              margin-left: 10px;
	              margin-top: 20px;
	              border-bottom: none;
	            }
	          }
	        }
	      }
	    }
	  }
		.cost_info {
			width: 100%;
			height: auto;
			padding: 10px 15px;
			box-sizing: border-box;
			background: #fff;
			margin-top: 10px;
			.cost_info_list {
				li {
					border-bottom: 1px solid #f2f2f2;
					margin: 5px 0;
					p{
						width: 100%;
						display: flex;
						align-items: center;
						padding: 5px 0;
						box-sizing: border-box;
						span {margin-left: 30px;}
						.item_title{
								margin-left: 0;
								text-align: right;
								color: #999;
								width: 90px;
								font-size: 13px;
						}
						.item_des {
							width: 66%;
						}
					}
				}
				li:last-child{
					border:none;
				}
			} 
		}
	
	}

	/deep/ .add_approver {
		height: 100% !important;
		max-height: 100% !important;
		border-radius: 0 !important;

		.van-action-sheet__header {
			.van-action-sheet__close {
				display: none;
			}
		}

		.content {
			padding: 15px;
		}

		.van-radio,
		.van-checkbox {
			border-bottom: 1px solid #f7f7f7;
			padding: 8px;
			font-size: 14px;

			.undertint {
				font-size: 12px;
				color: #bfbfbf;
			}
		}

		.van-radio__icon--checked .van-icon,
		.van-checkbox__icon--checked .van-icon {
			color: #fff;
			background-color: #02ccbd;
			border-color: #02ccbd;
		}

		.fix_bottom {
			width: 100%;
			height: 50px;
			position: fixed;
			left: 0;
			bottom: 0;
			padding-left: 10px;
			box-sizing: border-box;

			.select_style {
				height: 100%;
				line-height: 50px;
				color: #333333;
				margin-right: 3px;
				display: inline-block;
			}

			.van-button {
				float: right;
				color: #fff;
			}
		}
		
		.borrow_money {
			.bold {
				font-weight: 600;
			}
			p span{
				margin-right: 5px;
			}
			/deep/ .van-checkbox__icon--checked .van-icon {
				background-color: #02ccbd;
				border-color: #02ccbd;
			}
			/deep/ .van-tabbar-item__text{
			    display: block;
			    width: 100%;
			}
			/deep/ .van-button--large{
					width: 100%;
			    font-size: 16px;
			    font-weight: bold;
			    background-color: #02ccbd;
			    color: #fff;
			}
			.selectStyle {
				padding-bottom: 50px;
			}
		}
		.t-display{
			display: none;
		}
		/deep/ .van-button--large {
			width: 50%;
			font-size: 16px;
			font-weight: bold;
			background-color: #02ccbd;
			color: #fff;
		}
	}
	
	/deep/ .modified_approver {
		.content {
			padding: 0;
		}
		/deep/ .van-tabbar-item__text{
		    display: block;
		    width: 100%;
		}
		/deep/ .van-button--large{
				width: 100%;
				height: 50px;
				display: block;
		    font-size: 16px;
		    font-weight: bold;
		    background-color: #02ccbd !important;
		    color: #fff;
		}
	}
	
	.fixed_two_btn {
		/deep/ .van-tabbar-item__text {
			width: 100%;
		}
		/deep/ .van-button--normal{
			width: 50%;
			margin: 0;
		}
		/deep/ .van-button--large {
			width: 50%;
			font-size: 16px;
			font-weight: bold;
			background-color: #02ccbd;
			color: #fff;
		}
		/deep/ .van-button--large:last-child{
			background-color: #ff9966;
		}
	}
	
	.bottom_btn_half {
		.fix_bottom {
			.van-button--large {
			    width: 50%;
			    font-size: 0.427rem;
			    font-weight: bold;
			    background-color: #02ccbd;
			    color: #fff;
			}
		}
	}
	
	.bottom_btn_line {
		.borrow_money {
			.van-tabbar--fixed {
				.van-button--large {
					width: 100%;
					height: 50px;
					font-size: 16px;
					font-weight: bold;
					background-color: #02ccbd;
					color: #fff;
				}
			}
		}
	}
</style>
